<div class="content-section documentation">
    <h1>I18N</h1>
    <p>The i18n API allows setting translations globally for the components and integration with translation libraries.</p>

    <h5>PrimeNGConfig</h5>
    <p>A translation is applied using the PrimeNGConfig instance so begin with injecting it. A common location is the application root to initalize the default language used by the components.
        English is the default language and <i>setTranslation</i> function is used to change the values by passing a <i>Translation</i> object.</p>

<app-code lang="typescript" ngNonBindable ngPreserveWhitespaces>
import &#123; Component, OnInit, OnDestroy &#125; from '@angular/core';
import &#123; PrimeNGConfig &#125; from 'primeng/api';

@Component(&#123;
    selector: 'app-root',
    templateUrl: './app.component.html'
&#125;)
export class AppComponent implements OnInit, OnDestroy &#123;

    constructor(private config: PrimeNGConfig) &#123;&#125;

    ngOnInit() &#123;
        this.config.setTranslation(&#123;
            accept: 'Accept',
            reject: 'Cancel',
            //translations
        &#125;);
    &#125;
&#125;
</app-code>

        <h5>ngx-translate</h5>
        <p>i18n API can easily be integrated with 3rd party libraries such as ngx-translate that even allows
            dynamically changing the language in the application.</p>

        <h5>en.json</h5>
<app-code lang="typescript" ngNonBindable ngPreserveWhitespaces>
&#123;
    "primeng": &#123;
        "startsWith": "Starts with",
        "contains": "Contains",
        "notContains": "Not contains",
        "endsWith": "Ends with",
        "equals": "Equals",
        "notEquals": "Not equals",
        "noFilter": "No Filter",
        "lt": "Less than",
        "lte": "Less than or equal to",
        "gt": "Greater than",
        "gte": "Greater than or equal to",
        "is": "Is",
        "isNot": "Is not",
        "before": "Before",
        "after": "After",
        "dateIs": "Date is",
        "dateIsNot": "Date is not",
        "dateBefore": "Date is before",
        "dateAfter": "Date is after",
        "clear": "Clear",
        "apply": "Apply",
        "matchAll": "Match All",
        "matchAny": "Match Any",
        "addRule": "Add Rule",
        "removeRule": "Remove Rule",
        "accept": "Yes",
        "reject": "No",
        "choose": "Choose",
        "upload": "Upload",
        "cancel": "Cancel",
        "dayNames": ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
        "dayNamesShort": ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
        "dayNamesMin": ["Su","Mo","Tu","We","Th","Fr","Sa"],
        "monthNames": ["January","February","March","April","May","June","July","August","September","October","November","December"],
        "monthNamesShort": ["Jan", "Feb", "Mar", "Apr", "May", "Jun","Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
        "dateFormat": "mm/dd/yy",
        "firstDayOfWeek": 0,
        "today": "Today",
        "weekHeader": "Wk",
        "weak": 'Weak',
        "medium": 'Medium',
        "strong": 'Strong',
        "passwordPrompt": 'Enter a password',
        "emptyMessage": 'No results found',
        "emptyFilterMessage": 'No results found'
    &#125;
&#125;
</app-code>

<app-code lang="typescript" ngNonBindable ngPreserveWhitespaces>
import &#123; Component, OnInit, OnDestroy &#125; from '@angular/core';
import &#123; PrimeNGConfig &#125; from 'primeng/api';
import &#123; TranslateService &#125; from '@ngx-translate/core';

@Component(&#123;
    selector: 'app-root',
    templateUrl: './app.component.html'
&#125;)
export class AppComponent implements OnInit, OnDestroy &#123;

    constructor(private config: PrimeNGConfig, private translateService: TranslateService) &#123;&#125;

    ngOnInit() &#123;
        this.translateService.setDefaultLang('en');
    &#125;

    translate(lang: string) &#123;
        this.translateService.use(lang);
        this.translateService.get('primeng').subscribe(res => this.config.setTranslation(res));
    &#125;
&#125;
</app-code>

        <h5>Translation</h5>
        <p>Translation API consists of various values used throughout the component library.</p>

        <div class="doc-tablewrapper">
            <table class="doc-table">
                <thead>
                    <tr>
                        <th>Key</th>
                        <th>Value</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>startsWith</td>
                        <td>Starts with</td>
                    </tr>
                    <tr>
                        <td>contains</td>
                        <td>Contains</td>
                    </tr>
                    <tr>
                        <td>notContains</td>
                        <td>Not contains</td>
                    </tr>
                    <tr>
                        <td>endsWith</td>
                        <td>Ends with</td>
                    </tr>
                    <tr>
                        <td>equals</td>
                        <td>Equals</td>
                    </tr>
                    <tr>
                        <td>notEquals</td>
                        <td>Not equals</td>
                    </tr>
                    <tr>
                        <td>noFilter</td>
                        <td>No Filter</td>
                    </tr>
                    <tr>
                        <td>lt</td>
                        <td>Less than</td>
                    </tr>
                    <tr>
                        <td>lte</td>
                        <td>Less than or equal to</td>
                    </tr>
                    <tr>
                        <td>gt</td>
                        <td>Greater than</td>
                    </tr>
                    <tr>
                        <td>gte</td>
                        <td>Greater than or equal to</td>
                    </tr>
                    <tr>
                        <td>is</td>
                        <td>Is</td>
                    </tr>
                    <tr>
                        <td>isNot</td>
                        <td>Is not</td>
                    </tr>
                    <tr>
                        <td>before</td>
                        <td>Before</td>
                    </tr>
                    <tr>
                        <td>after</td>
                        <td>After</td>
                    </tr>
                    <tr>
                        <td>dateIs</td>
                        <td>Date is</td>
                    </tr>
                    <tr>
                        <td>dateIsNot</td>
                        <td>Date is not</td>
                    </tr>
                    <tr>
                        <td>dateBefore</td>
                        <td>Date is before</td>
                    </tr>
                    <tr>
                        <td>dateAfter</td>
                        <td>Date is after</td>
                    </tr>
                    <tr>
                        <td>clear</td>
                        <td>Clear</td>
                    </tr>
                    <tr>
                        <td>apply</td>
                        <td>Apply</td>
                    </tr>
                    <tr>
                        <td>matchAll</td>
                        <td>Match All</td>
                    </tr>
                    <tr>
                        <td>matchAny</td>
                        <td>Match Any</td>
                    </tr>
                    <tr>
                        <td>addRule</td>
                        <td>Add Rule</td>
                    </tr>
                    <tr>
                        <td>removeRule</td>
                        <td>Remove Rule</td>
                    </tr>
                    <tr>
                        <td>accept</td>
                        <td>Yes</td>
                    </tr>
                    <tr>
                        <td>reject</td>
                        <td>No</td>
                    </tr>
                    <tr>
                        <td>choose</td>
                        <td>Choose</td>
                    </tr>
                    <tr>
                        <td>upload</td>
                        <td>Upload</td>
                    </tr>
                    <tr>
                        <td>cancel</td>
                        <td>Cancel</td>
                    </tr>
                    <tr>
                        <td>dayNames</td>
                        <td>["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]</td>
                    </tr>
                    <tr>
                        <td>dayNamesShort</td>
                        <td>["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]</td>
                    </tr>
                    <tr>
                        <td>dayNamesMin</td>
                        <td>["Su","Mo","Tu","We","Th","Fr","Sa"]</td>
                    </tr>
                    <tr>
                        <td>monthNames</td>
                        <td>["January","February","March","April","May","June","July","August","September","October","November","December"]</td>
                    </tr>
                    <tr>
                        <td>monthNamesShort</td>
                        <td>["Jan", "Feb", "Mar", "Apr", "May", "Jun","Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]</td>
                    </tr>
                    <tr>
                        <td>dateFormat</td>
                        <td>mm/dd/yy</td>
                    </tr>
                    <tr>
                        <td>firstDayOfWeek</td>
                        <td>0</td>
                    </tr>
                    <tr>
                        <td>today</td>
                        <td>Today</td>
                    </tr>
                    <tr>
                        <td>weekHeader</td>
                        <td>Wk</td>
                    </tr>
                    <tr>
                        <td>weak</td>
                        <td>Weak</td>
                    </tr>
                    <tr>
                        <td>medium</td>
                        <td>Medium</td>
                    </tr>
                    <tr>
                        <td>strong</td>
                        <td>Strong</td>
                    </tr>
                    <tr>
                        <td>passwordPrompt</td>
                        <td>Enter a password</td>
                    </tr>
                    <tr>
                        <td>emptyMessage</td>
                        <td>No results found</td>
                    </tr>
                    <tr>
                        <td>emptyFilterMessage</td>
                        <td>No results found</td>
                    </tr>
                </tbody>
            </table>
        </div>

</div>
